<template>
  <div>
    <!-- 步骤条 -->
    <h-row>
      <h-col span="20" offset="4">
        <h-steps
          :current="$store.getters['components/currentRecharge']"
          style="margin-bottom: 12px"
        >
          <h-step
            title="选择用户"
            content="请输入客户类型，客户姓名，组件类型，证件号码"
            icon="t-b-account"
          ></h-step>
          <h-step
            title="选择银行卡"
            content="请输入银行卡号"
            icon="card"
          ></h-step>
          <h-step
            title="充值成功"
            content="完成充值流程"
            icon="task_fill"
          ></h-step>
        </h-steps>
      </h-col>
    </h-row>
    <!-- 具体内容 -->
    <h-row style="margin-top: 5vh;">
      <h-col>
        
      </h-col>
      <component
        class="animate__animated animate__fadeInRight card"
        :is="
          $store.getters['components/currentRecharge'] === 0
            ? 'enterUserInfo'
            : $store.getters['components/currentRecharge'] === 1
            ? 'selectCard'
            : $store.getters['components/currentRecharge'] === 2
            ? 'success'
            : ''
        "
      ></component>
    </h-row>
  </div>
</template>

<script>
export default {
  components: {
    enterUserInfo: () => import("@/components/bank/enterUserInfo.vue"),
    selectCard: () => import("@/components/bank/selectCard.vue"),
    success: () => import("@/components/bank/success.vue"),
  },
  data() {
    return {
      current: 0,
    };
  },
  methods: {
    checkBankCard(value, type, index) {
      //验证银行卡
      console.log(value, type);
      if (type === "" || type === undefined) {
        this.$hMessage.error("请选择银行卡类型");
        return;
      }
      bankCardCheck({
        identity_card_id: this.identity_card_id,
        identity_card_type: this.identity_card_type,
        num: value,
        name: this.name,
      })
        .then((res) => {
          if (res.data.code === 200) {
            this.$hMessage.success("银行卡验证成功");
            this.bankCard.push({ type, value });
          } else {
            this.$hMessage.error("银行卡验证失败");
            this.formDynamic.bankCard[index].value = "";
            this.formDynamic.bankCard[index].type = "";
          }
        })
        .catch((res) => {
          this.$hMessage.error("银行卡验证失败");
          this.formDynamic.bankCard[index].value = "";
          this.formDynamic.bankCard[index].type = "";
        });
    },
  },
};
</script>

<style scoped>
.card {
  padding: 3vh;
  border-radius: 6px;
}
</style>